<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: #6ff;
            margin: 50px auto;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>
<script>
    // 正常代码出错
    // var a = 1;
    // var b = 2;
    // var c = a + b;
    // console.log(C);  //报错:  C is not defined   =>抛出错误 =>  脚本之后的代码不在执行

    // for (var i = 0; i < 10; i++) {
    //     console.log(i);
    // }

    // try...catch...finally   用于处理代码在执行过程中 可能出现的错误

    // 注意： catch 和 finally 语句都是可选的，但你在使用 try 语句时必须至少使用一个。

    // 语法
    // try {
    //     // 尝试执行的代码 (可能有错误 也可能没有错误)
    // } catch (err) {  // err错误信息
    //     // 捕获错误的代码块   当try中的代码段出现错误 => 捕获错误 (错误并没有被抛出=>不会影响后续代码的执行)
    // } finally {
    //     // 无论 try / catch 结果如何都会执行的代码块
    // }


    // try catch应用


    var box = document.getElementsByClassName("box")[0];

    // function getStyle(ele, attr) {
    //     if (window.getComputedStyle) {
    //         return window.getComputedStyle(ele)[attr];
    //     } else {
    //         return ele.currentStyle[attr];
    //     }
    // }

    // 浏览器兼容  => 当错误发生时补救性的措施
    function getStyle(ele, attr) {
        try {
            return window.getComputedStyle(box)[attr];
        } catch (err) {
            return ele.currentStyle[attr];
        }
    }








</script>

</html>